
<template>
    <div v-loading="loading" class="add">
        <SavePage title="新增单价">
            <template slot="buttons">
                <BaseButton :loading="submitLoading"  :disabled="submitDisabled" @click="submit()">保存</BaseButton>
            </template>
            <template slot="body">
                <BaseForm2
                    ref="form"
                    label-position="right"
                    label-width="120px"
                    :fields="fields"
                    :text-model="textModel"
                    :data="form"
                    size="medium"
                ></BaseForm2>
                <!-- 工程量清单 -->
                <InventoryTable :id="id" ref="billOfQuantities" key="billOfQuantities" :data="tableList" :type="1"></InventoryTable>
                <!-- 计日工清单 -->
                <InventoryTable :id="id" ref="dayWork" key="dayWork" :data="tableList" :type="2"></InventoryTable>
                
                <TitleTips title="附件资料" />
                <div style="display: flex; ">
                    <div data-v-24418de0="" class="el-form-item is-required el-form-item--medium">
                        <label class="el-form-item__label">新增单价审批表</label>
                    </div>
                    <FileUpload
                        ref="fileUpload"
                        :list="form.filesUrl"
                        style="margin: 0;"
                        :tips="fileTips"
                        :limit="limit"
                        :size="size"
                        :accept="accept"
                        :file-rule-type="fileRuleType"
                        @load="handleLoad"
                    />
                </div>
            </template>
        </SavePage>
    </div>
</template>
                    
<script>
import { ContractPriceModel } from '@/models'
import BaseForm2 from '@/components/BaseForm2'
import InventoryTable from './InventoryTable'
import reconfirm from '@/utils/reconfirm'

export default {
    name: 'UnitPriceAdd',
    components: {
        BaseForm2,
        InventoryTable
    },
    data() {
        return {
            model: new ContractPriceModel(),
            loading: false,
            submitDisabled: false,
            submitLoading: false,
            id: '',
            type: 'add',
            textModel: false,
            form: {
                declarationCode: '',
                applyDate: '',
                approvalDate: '',
                declarationBasis: '',
                filesUrl: []
            },
            fields: [
                {
                    label: '基础信息',
                    children: [
                        {
                            key: 'declarationCode',
                            label: '申报编号',
                            placeholder: '请输入',
                            type: 'input',
                            span: 8,
                            rules: [{ required: true, message: '必填项', trigger: ['change'] }]
                        },
                        {
                            key: 'applyDate',
                            type: 'date-input',
                            format: 'yyyy-MM-dd',
                            'value-format': 'yyyy-MM-dd',
                            span: 8,
                            label: '申请日期',
                            placeholder: '请选择',
                            rules: [
                                { required: true, message: '必填项', trigger: ['change'] }
                            ]
                        },
                        {
                            key: 'approvalDate',
                            type: 'date-input',
                            format: 'yyyy-MM-dd',
                            'value-format': 'yyyy-MM-dd',
                            span: 8,
                            label: '审批通过日期',
                            placeholder: '请选择'
                        },
                        {
                            key: 'declarationBasis',
                            type: 'textarea',
                            label: '申报依据',
                            placeholder: '请输入',
                            resize: 'vertical',
                            class: 'text-overflow',
                            rows: 4,
                            span: 16,
                            maxlength: 200,
                            'show-word-limit': true,
                            rules: [{ required: true, message: '必填项', trigger: ['change'] }]
                        }
                    ]
                }
            ],
            tableList: [],
            limit: 20,
            size: 20,
            accept: 'application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,image/jpeg,image/png',
            fileRuleType: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'jpg', 'jpeg', 'png'],
            fileTips: '1、上传文件需包含“新增单价审批表”的扫描文件；<br/>2、最多上传20个文件，单个文件最多20M，支持：.pdf .doc .docx  .xls .xlsx .jpg .jpeg .png 格式。'
        }
    },
    created() {
        this.getQuery()
    },
    methods: {
        getQuery() {
            this.type = this.$route.query.type
            this.id = this.$route.query.id
        },
        validNameUnique(rule, value, callback) {
            this.model.validNameUnique({ name: value, id: this.form.id || null }).then((res) => {
                if (!res) {
                    callback(new Error('合同名称已存在'))
                } else {
                    callback()
                }
            })
        },
        validCodeUnique(rule, value, callback) {
            this.model.validNameUnique({ code: value, id: this.form.id || null }).then((res) => {
                if (!res) {
                    callback(new Error('合同编号已存在'))
                } else {
                    callback()
                }
            })
        },
        handleLoad(value) {
            this.submitDisabled = value
        },
        submit() {
            this.submitLoading = true
            this.$refs['form'].validate(async (valid, res) => {
                if (valid) {
                    const billList = this.$refs['billOfQuantities'].tableList
                    const dayWorkList = this.$refs['dayWork'].tableList
                    if (!billList.length && !dayWorkList.length) {
                        this.$message({
                            type: 'error',
                            message: '工程量清单和计日工清单至少一个不为空！'
                        })
                        this.submitLoading = false
                        return
                    }

                    const fileList = this.$refs['fileUpload'].getFileList()
                    if (fileList.length === 0) {
                        this.$message({
                            type: 'error',
                            message: '请上传新增单价审批表'
                        })
                        this.submitLoading = false
                        return
                    }
                    
                    reconfirm({
                        text: '请确认新增单价内容已填报正确，提交后不支持撤销、编辑！',
                        title: '提交新增单价',
                        confirmButtonText: '提交',
                        callback: () => {
                            const filesUrl = JSON.stringify(fileList)
                            const data = {
                                ...res,
                                contractId: this.id,
                                billList,
                                dayWorkList,
                                filesUrl
                            }
                            return this.model.saveOrUpdate(data).then(() => {
                                this.$message({
                                    type: 'success',
                                    message: '操作成功！',
                                    duration: 1000,
                                    onClose: () => {
                                        this.$router.go(-1)
                                    }
                                })
                            }).finally(() => {
                                this.submitLoading = false
                            })
                        },
                        cancelCallback: () => {
                            this.submitLoading = false
                        }
                    })
                } else {
                    this.submitLoading = false
                }
            })
        }
    }
}
</script>
                    
<style lang="scss" scoped>
.spe-item {
    ::v-deep {
        .el-form-item__label {
            text-align: center;
            padding: 0;
            &::before {
                display: none;
            }
        }
        .el-input,
        .el-input__inner {
            min-width: auto !important;
        }
    }
}

.add {
    width: 100%;
    // padding:0 20px
    .info {
        .sub-title {
            font-size: 14px;
            font-weight: 600;
        }
        .check-box {
            margin-top: 20px;
            .check-list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                .check-item {
                    width: 33%;
                    margin: 4px 0;
                }
            }
        }
    }
}
</style>

